.webui-components-container {
  display: grid;

  gap: 10px;
  grid-template-columns: 1fr 1fr;


  .left-container {
    min-width: 0;

    .io-input-area {
      border: 1px solid #d3d5dc;
      padding: .5em;
      border-radius: 8px;
      margin-bottom: .5em;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;

      &.io-input-area-text {
        flex-direction: column;
        justify-content: stretch;
      }

      .io-input-node-container {

        display: flex;
        flex-direction: column;
        justify-content: center;

        .io-node-name {
          font-size: 14px;
          text-align: center;
          //border-bottom: 1px solid #eee;
        }
      }


    }

    .param-area {
      display: flex;
      flex-direction: column;
      gap: .5em;

      .ui-params {
        .nodeLael {
          //color: #999;
          font-style: italic;
          margin-right: .3em;
        }
      }
    }



  }

  .right-container {
    min-width: 0;

    .io-output-area {

      border: 1px solid #d3d5dc;
      border-radius: 8px;
      margin-bottom: .5em;
      padding: .5em;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;

      &.io-output-area-text {
        flex-direction: column;
        justify-content: stretch;
      }

      .io-output-node-container {
        //width: 200px;
        display: flex;
        flex-direction: column;
        //justify-content: center;

        .io-node-name {
          font-size: 14px;
          text-align: center;

        }
      }

    }
  }

}